<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>注册</title>
    
	<meta charset="UTF-8">
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/modle.css">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
		.main-body-div{
			height: 550px;
			background: none;
			border: none;
		}
		form{
			width: 500px;
			height: 400px;
			margin: 0px auto;
			margin-top: 5%;
		}
		table{
			width: 100%;
			height: 100%;
			background: white;
			border: 1px solid #8b8b8b;
			background: white;
			border-radius: 5px;
		}
		tr{
			line-height: 30px;
		}
		table tr:FIRST-CHILD td{
			text-align: center;
		}
		tr td:FIRST-CHILD{
			width: 35%;
			text-align: right;
		}
		tr td:LAST-CHILD{
			width: 65%;
			text-align: left;
		}
		tr td:LAST-CHILD{
			width: 75%;
			text-align: left;
		}
		table tr:LAST-CHILD td{
			text-align: center;
		}
		input[type='text'],[type='password'],[type="number"] {
			width: 60%;
		}
		input[type='submit'] {
			width:50%;
			height: 35px;
			border-radius: 8px;
			background: blue;
			color: white;
			margin: 10px;
			font-size: 16px;
		}
		input+span{
			color: red;
			font-size: 12px;
		}
	</style>
	<script src="js/jquery-1.12.4.js"></script>
	<script type="text/javascript">
		function checkName(){
			var name=$("#name").val();
			$("#name+span").html("");
			if(name==''){
				$("#name+span").html("用户名不能为空");
				return false;
			}
			return true;
		}
		function checkPwd(){
			var ispwd=true;
			var pwd=$("#pwd").val();
			$("#pwd+span").html("");
			if(pwd==''){
				$("#pwd+span").html("密码不能为空");
				return false;
			}else if(pwd.length<6){
				$("#pwd+span").html("密码不能小于6位");
				return false;
			}
			return true;
		}
		function checkEmail(){
			var emailrex=/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
			var email=$("#email").val();
			$("#email+span").html("");
			if(email==''){
				$("#email+span").html("邮箱不能为空");
				return false;
			}else if(!emailrex.test(email)){
				$("#email+span").html("邮箱格式不正确");
				return false;
			}
			return true;
		}
		function checkPhone(){
			var phonerex=/^1[3,5,7,8][0-9]{9}$/;
			var phone=$("#phone").val();
			$("#phone+span").html("");
			if(phone==''){
				$("#phone+span").html("电话不能为空");
				return false;
			}else if(!phonerex.test(phone)){
				$("#phone+span").html("电话号码格式不正确");
				return false;
			}
			return true;
		}
		
		function checks(){
			var uname=$("#name").val();
			var phone=$("#phone").val();
			var email=$("#email").val();
			$.ajax({
					url:"checkreg",
					type:"post",
					data:{"uname":uname,"phone":phone,"email":email},
					success:function(res){
						if(res!=""){
							if(res=="用户名已被注册"){
								$("#name+span").html(res);
							}else if(res=="电话号码已被注册"){
								$("#phone+span").html(res);
							}else{
								$("#email+span").html(res);
							}
						}
					}
				});
		}
		
		$(function(){
			$("#name").blur(function(){
				checkName();
				checks();
			});
			
			$("#pwd").blur(function(){
				checkPwd();
			});
			
			$("#email").blur(function(){
				checkEmail();
				checks();
			});
			
			$("#phone").blur(function(){
				checkPhone();
				checks();
			});
			
			$("#regform").submit(function(){
				if(checkName() && checkPwd() && checkPhone()){
					return true;
				}
				alert("信息不完善，提交失败");
				return false;
			});
		});
	</script>
  </head>
  
  <body class="mybody">
  	<div class="main">
  		<div class="index-title">
  			<iframe src="index-b-elem/header.jsp" frameborder="0" id="title-if"></iframe>
  		</div>
	    <div class="main-body-div">
	    	<form action="do/doreg.jsp" method="post" id="regform">
		      <table>
		      	<tr>
		        	<td colspan="2">
		        		<h2>注&nbsp;&nbsp;&nbsp;&nbsp;册</h2>
		        	</td>
		        </tr>
		        <tr>
		          <td>姓&nbsp;&nbsp;名：</td>
		          <td><input type="text" name="uname" id="name"/><span></span></td>
		        </tr>
		        <tr>
		          	<td>密&nbsp;&nbsp;码：</td>
		         	<td><input type="password" name="pwd" id="pwd"/><span></span></td>
		        </tr>
		        <tr>
		         	<td>性&nbsp;&nbsp;别：</td>
		          	<td>
		          		<input type="radio" name="sex" value="男"/>男
		          		<input type="radio" name="sex" value="女"/>女
		         	 </td>
		        </tr>
		         <tr>
		          	<td>邮&nbsp;&nbsp;箱：</td>
		          	<td><input type="text" name="email" id="email"/><span></span></td>
		        </tr>
		        <tr>
		          	<td>电&nbsp;&nbsp;话：</td>
		          	<td><input type="number" name="phone" id="phone"/><span></span></td>
		        </tr>
		        <tr>
		        	<td colspan="2">
		        		<input type="submit" value="注&nbsp;&nbsp;&nbsp;&nbsp;册"/>
		        	</td>
		        </tr>
		      </table>
		    </form>
		</div>
		<div class="index-footer">
  			<iframe src="index-b-elem/footer.jsp" frameborder="0" id="title-if"></iframe>
  		</div>
   	</div> 
  </body>
</html>
